<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js导航菜单</title>
<link rel="stylesheet" type="text/css" href="css/ddlevelsmenu-base.css" />

<script type="text/javascript" src="js/ddlevelsmenu.js"></script>
<script type="text/javascript">
//顶部菜单栏示例
ddlevelsmenu.setup("ddtopmenubar", "topbar")
//侧面菜单栏示例
ddlevelsmenu.setup("ddsidemenubar", "sidebar")
</script>
</head>
<body>

<h3>各级导航菜单: 顶部菜单栏示例</h3>

<link rel="stylesheet" type="text/css" href="css/ddlevelsmenu-topbar.css" />

<div id="ddtopmenubar" class="mattblackmenu">
	<ul>
		<li><a href="http://www.jsfoot.com/">首页</a></li>
		<li><a href="http://www.jsfoot.com/jquery/" rel="ddsubmenu1">jquery 特效</a></li>
		<li><a href="http://www.jsfoot.com/js/" rel="ddsubmenu2">javascript特效</a></li>
		<li><a href="http://www.jsfoot.com/flash/">flash特效</a></li>
		<li><a href="http://www.jsfoot.com/css3/" rel="ddsubmenu3">div+css教程</a></li>
	</ul>
</div><!--mattblackmenu end-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
	<li><a href="http://www.jsfoot.com/">Item 1a</a></li>
	<li><a href="http://www.jsfoot.com/">Item 2a</a></li>
	<li>
		<a href="http://www.jsfoot.com/">Item Folder 3a</a>
		<ul>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.1a</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.2a</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.3a</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.4a</a></li>
		</ul>
	</li>
	<li><a href="http://www.jsfoot.com/">Item 4a</a></li>
	<li>
		<a href="http://www.jsfoot.com/">Item Folder 5a</a>
		<ul>
			<li><a href="http://www.jsfoot.com/">Sub Item 5.1a</a></li>
			<li>
				<a href="http://www.jsfoot.com/">Item Folder 5.2a</a>
				<ul>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.1a</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.2a</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.3a</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.4a</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="http://www.jsfoot.com/">Item 6a</a></li>
</ul>
<!--ddsubmenustyle end-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
	<li><a href="http://www.jsfoot.com/">Item 1b</a></li>
	<li><a href="http://www.jsfoot.com/">Item 2b</a></li>
	<li>
		<a href="http://www.jsfoot.com/">Item Folder 3b</a>
		<ul>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.1b</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.2b</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.3b</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.4b</a></li>
		</ul>
	</li>
	<li><a href="http://www.jsfoot.com/">Item 4b</a></li>
	<li>
		<a href="http://www.jsfoot.com/">Item Folder 5b</a>
		<ul>
			<li><a href="http://www.jsfoot.com/">Sub Item 5.1b</a></li>
			<li>
				<a href="http://www.jsfoot.com/">Item Folder 5.2b</a>
				<ul>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.1b</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.2b</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.3b</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="http://www.jsfoot.com/">Item 6b</a></li>
</ul>
<!--ddsubmenustyle end-->

<ul id="ddsubmenu3" class="ddsubmenustyle">
	<li><a href="http://www.jsfoot.com/">Image Optimizer</a></li>
	<li><a href="http://www.jsfoot.com/">FavIcon Generator</a></li>
	<li><a href="http://www.jsfoot.com/">Email Riddler</a></li>
	<li><a href="http://www.jsfoot.com/">htaccess Password</a></li>
	<li><a href="http://www.jsfoot.com/">htaccess Banning</a></li>
</ul>
<!--ddsubmenustyle end-->


<h3>各级导航菜单: 侧面菜单栏示例</h3>

<link rel="stylesheet" type="text/css" href="css/ddlevelsmenu-sidebar.css" />

<div id="ddsidemenubar" class="markermenu">
	<ul>
		<li><a href="http://www.jsfoot.com/">首页</a></li>
		<li><a href="http://www.jsfoot.com/jquery/" rel="ddsubmenuside1">jquery 特效</a></li>
		<li><a href="http://www.jsfoot.com/js/" rel="ddsubmenuside2">javascript特效</a></li>
		<li><a href="http://www.jsfoot.com/flash/">flash特效</a></li>
		<li><a href="http://www.jsfoot.com/css3/" rel="ddsubmenuside3">div+css教程</a></li>
	</ul>
</div><!--markermenu end-->

<ul id="ddsubmenuside1" class="ddsubmenustyle blackwhite">
	<li><a href="http://www.jsfoot.com/">Item 1a</a></li>
	<li><a href="http://www.jsfoot.com/">Item 2a</a></li>
	<li>
		<a href="http://www.jsfoot.com/">Item Folder 3a</a>
		<ul>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.1a</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.2a</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.3a</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.4a</a></li>
		</ul>
	</li>
	<li><a href="http://www.jsfoot.com/">Item 4a</a></li>
	<li>
		<a href="http://www.jsfoot.com/">Item Folder 5a</a>
		<ul>
			<li><a href="http://www.jsfoot.com/">Sub Item 5.1a</a></li>
			<li>
				<a href="http://www.jsfoot.com/">Item Folder 5.2a</a>
				<ul>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.1a</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.2a</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.3a</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.4a</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="http://www.jsfoot.com/">Item 6a</a></li>
</ul>
<!--ddsubmenustyle end-->

<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">
	<li><a href="http://www.jsfoot.com/">Item 1b</a></li>
	<li><a href="http://www.jsfoot.com/">Item 2b</a></li>
	<li>
		<a href="http://www.jsfoot.com/">Item Folder 3b</a>
		<ul>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.1b</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.2b</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.3b</a></li>
			<li><a href="http://www.jsfoot.com/">Sub Item 3.4b</a></li>
		</ul>
	</li>
	<li><a href="http://www.jsfoot.com/">Item 4b</a></li>
	<li>
		<a href="http://www.jsfoot.com/">Item Folder 5b</a>
		<ul>
			<li><a href="http://www.jsfoot.com/">Sub Item 5.1b</a></li>
			<li>
				<a href="http://www.jsfoot.com/">Item Folder 5.2b</a>
				<ul>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.1b</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.2b</a></li>
					<li><a href="http://www.jsfoot.com/">Sub Item 5.2.3b</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="http://www.jsfoot.com/">Item 6b</a></li>
</ul>
<!--ddsubmenustyle end-->

<ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">
	<li><a href="http://www.jsfoot.com/">Image Optimizer</a></li>
	<li><a href="http://www.jsfoot.com/">FavIcon Generator</a></li>
	<li><a href="http://www.jsfoot.com/">Email Riddler</a></li>
	<li><a href="http://www.jsfoot.com/">htaccess Password</a></li>
	<li><a href="http://www.jsfoot.com/">htaccess Banning</a></li>
</ul>
<!--ddsubmenustyle end-->

</body>
</html>